<template>
  <el-row class="login" type="flex" justify="center" align='middle'>
    <el-col :xs="14" :sm="12" :md="10" :lg="8" :xl="5">
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="100px" label-position='top' class="login-Form">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" type='password'></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
          <el-button @click="resetForm('loginForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  
</template>

<script>
import axios from 'axios'
export default {
    data() {
      return {
        loginForm: {
          username: 'admin',
          password: '123456'
        },
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.loginForm.validate((valid) => {
          if (!valid) {
            return false;  
          }
          // 登录成功时的代码逻辑
          // 设定登录访问限制
          axios.post('http://localhost:8888/api/private/v1/login',this.loginForm)
          .then(res=>{
            console.log(res.data);
            if(res.data.meta.status === 200) {
              // 保存token到localstroge
              localStorage.setItem('token',res.data.data.token)
              // 编程式导航
              this.$router.push('/home')
              // 输出登录成功信息
              this.$message({
              message: res.data.meta.msg,
              type: 'success',
              duration:700
              });
            }
            else {
              // this.$message.error(res.data.meta.msg);
              this.$message({
              message: res.data.meta.msg,
              type: 'error',
              duration:900
              });
            }
            
          })
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>

<style>
.login {
  height: 100%;
  background: #2D434C;
}
.login-Form {
  background: #fff;
  padding: 20px;
  border-radius: 15px;
}
</style>
